﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>登录</title>

    <link rel="stylesheet" href="http://47.94.147.215/static/h5/css/style.css"/>
    <%--<script src="http://47.94.147.215/static/h5/js/form.js"></script>--%>
    <script src="http://47.94.147.215/static/plugins/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://47.94.147.215/static/plugins/jquery.validate.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="http://47.94.147.215/static/plugins/jquery.form.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://47.94.147.215/static/plugins/messages_zh.min.js" type="text/javascript"
            charset="utf-8"></script>

    <style>
        body{
            background: url('image/hubu.jpg') no-repeat center/cover;
        }
    </style>
    <script>
        window.onload=function(){
            var form_login = document.querySelector('.form_login')
            var form_register = document.querySelector('.form_register')
            var switchBtns = document.querySelectorAll('.switch')

            switchBtns.forEach(function(item){
                item.addEventListener('click',function(){
                    if(this.innerText=='教师登录'){
                        addStyle(form_login,{ height: '0',transitionDelay:'0s'})
                        addStyle(form_register,{height: '320px',transitionDelay: '1.2s'})
                    }else if(this.innerText=='学生登录'){
                        addStyle(form_login,{ height: '320px', transitionDelay: '1.2s'})
                        addStyle(form_register,{height: '0',transitionDelay:'0s'})
                    }
                })
            })

            function addStyle(ele,orignStyle){
                for(var item in orignStyle){
                    if(ele){
                        ele.style[item] = orignStyle[item]
                    }
                }
            }
        }
    </script>
</head>
<body>
    <%--<form id="form1" runat="server">--%>
        <div class="form" style="position:relative">

            <!--登录表单-->
            <div class="form_login">
                <form action="login_register.aspx" method="post">
                    <h1>学生登录</h1>
                    <input type="text" name="role" value="0" hidden/>
                    <div class="form_item">
                        <label for="username">账号：</label>
                        <input type="text" name="id" id="username" placeholder="请输入用户名" required/>
                    </div>
                    <div class="form_item">
                        <label for="password">密码：</label>
                        <input type="password" name="password" placeholder="请输入密码名" required/>
                    </div>
                    <p id="errorInfo" runat="server" style="display:none"></p>
                    <div class="form_item">
                        <input type="submit" value="登录"/>
                    </div>
                </form>
                <div class="info">我是教师？点击<span class="switch register_Btn">教师登录</span></div>
            </div>


            <!--注册表单-->
            <div class="form_register" style="position:absolute;height: 0px;">
                <form action="/login_register.aspx" method="post" id="register_form">
                    <h1>教师登录</h1>
                    <input type="text" name="role"  value="1" hidden/>
                    <div class="form_item">
                        <label>账号：</label>
                        <input type="text" name="id" placeholder="请输入用户名" required/>
                    </div>

                    <div class="form_item">
                        <label>密码：</label>
                        <input id="password" type="password" name="password" placeholder="请输入密码" required/>
                    </div>

                    <div class="form_item">
                        <input type="submit" value="登录"/>
                    </div>
                </form>
                <div class="info">我是学生？点击<span class="switch login_Btn">学生登录</span></div>
            </div>
        </div>
    <%--</form>--%>
</body>
    <script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function (form) {
            $(form).ajaxSubmit({//这里校验通过后才异步提交表单
                success: function (response) {
                    if (response.code == 0) {
                        alert(response.msg);
                        location.reload();
                    } else if (response.code == 400) {
                        alert(response.msg);
                        ;
                    }
                }
            });
        }
    });
    //$().ready(function () {
    //    $("#register_form").validate({
    //            rules: {　　　　//规则
    //                username: {　　//要对应相对应的input中的name属性
    //                    required: true,
    //                    rangelength: [6, 16]
    //                },
    //                password: {
    //                    required: true,
    //                    rangelength: [6, 16]
    //                },
    //                confirm: {
    //                    required: true,
    //                    equalTo: "#password",
    //                    rangelength: [6, 16]
    //                },
    //                email: {
    //                    required: true,
    //                    email: true
    //                },
    //                school: {
    //                    required: true
    //                },
    //                major: {
    //                    required: true
    //                },
    //                grade: {
    //                    required: true
    //                }
    //            },
    //            messages: {　　　　//验证错误信息
    //                username: {
    //                    required: "用户名不能为空",
    //                    rangelength: "用户名长度6-16"

    //                },

    //                password: {
    //                    required: "密码不能为空",
    //                    rangelength: "密码长度6-16"
    //                },

    //                confirm: {
    //                    required: "请再次输入密码",
    //                    rangelength: "密码长度6-16",
    //                    equalTo: "两次密码不一致"
    //                },

    //                email: {
    //                    required: "邮箱不能为空",
    //                    email: "请输入正确格式的邮箱"
    //                },

    //                school: {
    //                    required: "请选择学校"
    //                },
    //                major: {
    //                    required: "请选择专业"
    //                },
    //                grade: {
    //                    required: "请选择年级"
    //                }
    //            }
    //        }
    //    )
    //});
</script>
</html>
